[8]用MAN架構打造超人般的網頁應用程式:AngularJS - Plugin:UI-Router - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

DAY 6

用MAN架構打造超人般的網頁應用程式:復仇者聯盟系列第 6 篇

[8]用MAN架構打造超人般的網頁應用程式:AngularJS - Plugin:UI-Router

鐵人賽 angularjs man

blackie1019i

2013-10-07 00:33:04

4999 瀏覽

分享至

在昨天介紹的Routing中，讓大家對換頁有基本的概念後就要來介紹這個AngularJS上必裝超強的plugin:UI-Router。
用MAN架構打造超人般的網頁應用程式系列文章
 用MAN架構打造超人般的網頁應用程式系列文章

UI-Router

github

UI-Router是AngularJS的一個routing framework，主要是幫助你可以有架構將你的頁面分開成不同的子頁面呈現Nested view，不同於原本的$route service，UI-Router 是一個透過state的架構來切換頁面，這讓你有更大的彈性來切換你的頁面。

使用方式如下：

 <!doctype html>
<html ng-app="myApp">

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="js/angular-ui-router.min.js"></script>
...


...
<script>
var myApp = angular.module('myApp', ['ui.router']);
</script>

範例

首先在結構上總共有五個頁面，頁面上大致說明如下

index.html

範例首頁，載入所有css,js與設定ng-app的應用範圍，重點設定如下：

 myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "partials/state1.html"
})
.state('state1.list', {
url: "/list",
templateUrl: "partials/1.list.html",
controller: function($scope) {
$scope.items = ["A", "List", "Of", "Items"];
}
})
.state('state2', {
url: "/state2",
templateUrl: "partials/state2.html"
})
.state('state2.list', {
url: "/list",
templateUrl: "partials/state2.list.html",
controller: function($scope) {
$scope.things = ["A", "Set", "Of", "Things"];
}
})
});

這邊透過設定每個state對應的url中的templateUrl與controller來分配連接版面與各版面操控的內容。

route1.html

當url指到#/route1時顯示的頁面，裡面包含一個子狀態的設定顯示route1.list.html的內容，url指到#/route2時顯示的頁面，裡面包含一個子狀態的設定顯示route2.list.html的內容，原始碼如下：

 <!-- partials/state1.html -->
<h1>Route 1</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>




 <!-- partials/state2.html -->
<h1>Route 2</h1>
<hr/>
<a ui-sref=".list">Show List</a>
<div ui-view></div>

這邊透過ui-sref的方式指定Show List的內容來自於各自檔名接上.list之後的html頁面內容。